<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Popup example -- double underscore</title>
  <link rel="stylesheet" type="text/css" href="../example.css" />
</head>
<body>
<div id="doc4">
  <div class="hd">
    <div class="logo" style="float:left;"><a href="http://code.google.com/p/double-underscore/" target="_blank"><img src="http://stauren.net/misc/images/bullhead.gif" /></a></div>
    <div class="hd-title">du popup example</div>
    <div>
      <a href="http://code.google.com/p/double-underscore/">Project home</a>&nbsp;
      <a href="http://code.google.com/p/double-underscore/w/list">More docs </a>
    </div>
  </div>
  <div class="hd">
    <h1>Code</h1>
<pre>
&lt;script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"&gt;&lt;/script&gt;
//NOTICE: loader.js in trunk is not stable, should always use the newest loader in pkgs
&lt;script&gt;
__.load('popup', function() {
  //initilize popup object in onload callback
});
&lt;/script&gt;
</pre>
    <h1>Example: Simple popup</h1>
    <button id="open">Open popup</button>&nbsp;
<pre>
  var popup1 = new __.widget.Popup('Simple popup alert', false, {
    showAfterInit : false,
    modal : false,
    onCancel : false,
    onOk : function() {
      dolog('onOk invoked');
    },
    onClose : function() {
      dolog('onClose invoked');
    }
  });
</pre>
    <h1>Example: Modal popup with 6 callbacks</h1>
    <button id="modalmode">Open modal dialog</button><br>
<pre>
  var flag = false,
    popup2 = new __.widget.Popup(content2, 'Dialog title', {
      showAfterInit : false,
      onB4Ok : function() {
        if (!flag) {
          dolog('onOk is stopped by return false in onB4Ok');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onB4Cancel : function() {
        if (!flag) {
          dolog('onCancel is stopped by return false in onB4Cancel');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onB4Close : function() {
        if (!flag) {
          dolog('onClose is stopped by return false in onB4Close');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onOk : function() {
        dolog('onOk invoked');
      },
      onCancel : function() {
        dolog('onCancel invoked');
      },
      onClose : function() {
        dolog('onClose invoked');
      }
    });
</pre>
  </div>
</div>
<script src="../example.js"></script>
<script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"></script>
<script>

__.load('popup', function() {

  dolog('Initiation complete');

  __.Dom.f('.tlogger').style.zIndex = 1000;

  var popup1 = new __.widget.Popup('Simple popup alert', false, {
    showAfterInit : false,
    modal : false,
    onCancel : false,
    onOk : function() {
      dolog('onOk invoked');
    },
    onClose : function() {
      dolog('onClose invoked');
    }
  });

var content2 = '<div style="height:120px;"><p>3 ways to set content:</p><ul>\
<li>1, set content by send HTML</li>\
<li>2, by send dom reference</li>\
<li>3, by send js object (__.Dom.addEl\'s parameter) </li>\
</ul></div>';

  var flag = false,
    popup2 = new __.widget.Popup(content2, 'Dialog title', {
      showAfterInit : false,
      onB4Ok : function() {
        if (!flag) {
          dolog('onOk is stopped by return false in onB4Ok');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onB4Cancel : function() {
        if (!flag) {
          dolog('onCancel is stopped by return false in onB4Cancel');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onB4Close : function() {
        if (!flag) {
          dolog('onClose is stopped by return false in onB4Close');
          flag = true;
          return false;
        } else {
          return true;
        }
      },
      onOk : function() {
        dolog('onOk invoked');
      },
      onCancel : function() {
        dolog('onCancel invoked');
      },
      onClose : function() {
        dolog('onClose invoked');
      }
    });

  __.on('open', 'click', function() {
    popup1.show();
  });
  __.on('modalmode', 'click', function() {
    popup2.show();
  });
});
</script>
</body>
</html>
